.fui-property
  @include flex-align(center, flex-start)

  .icon
    margin-right: 7px

  .label
    min-width: 60px
    margin-right: 10px
    line-height: 20px
    font-size: $font-md
    color: $text-mute

  .value
    line-height: 20px
    font-size: $font-md
    color: $text-default

    &.link
      color: $brand-primary
      cursor: pointer
      transition: color .3s

      &:hover
        color: $brand-info

@mixin fui-property-mixin($type, $color)
  \:host(.fui-property-#{$type})
    .value
      color: $color

@include fui-property-mixin(danger, $brand-danger)
@include fui-property-mixin(normal, $text-default)
